<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Chart Plugin Demo version 0.1</title>
<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript" src="includes/json.js"></script>
<script type="text/javascript" src="includes/chartplugin.js"></script>
<script type="text/javascript" src="includes/excanvas.js"></script>
<script type="text/javascript" src="includes/wz_jsgraphics.js"></script>
<script type="text/javascript" src="includes/chart.js"></script>
<script type="text/javascript" src="includes/canvaschartpainter.js"></script>
<script type="text/javascript" src="includes/jgchartpainter.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="includes/canvaschart.css" />
<link rel="stylesheet" href="star-light/star-light.css" type="text/css"/>
<script type="text/javascript">
function getTableCol(col, flag) {
	 var coldata=[];
	 $("input[@name="+col+"]").each(function() {
			var val1 = $(this).val();
			if (flag != undefined && flag == 'c3') {
				val1 *= 100;
			}
			coldata.push(val1);
		});
	 return coldata;
}
function setTableCol(col,data) {
	$("input[@name="+col+"]").each(function() {$(this).val(data.shift());});
}
function addColorOptions() {
	var options='';
	var colors=['#cc0000','#00cc00','#0000cc'];
	var gradient=['8','A','C','E','F'];
	$('.colorpick').each(function() {
							 var n=$(this).attr('name');
							 n=parseInt(n.charAt(1));
							 if (isNaN(n)) {n=0;}
							 var opt=new Option('#000000','#000000');opt.style.backgroundColor='#000000';
							 this.options[this.options.length]=opt;
							 for(var j=0;j<colors.length;j++) {
								 for(var i=0;i<gradient.length;i++) {
									 var c=colors[(j+n)%3];
									 c=c.replace(/c/g,gradient[i]);
									 var opt=new Option(c,c);
									 opt.style.backgroundColor=c;
									 if ($(this).attr('default')==c) {
									     opt.selected=true;
										 this.style.backgroundColor=opt.style.backgroundColor;
									 }
									 this.options[this.options.length]=opt;
								 }
							 }
							 var opt=new Option('#FFFFFF','#FFFFFF');opt.style.backgroundColor='#FFFFFF';
							 this.options[this.options.length]=opt;
							 $(this).change(function() {
												this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor;
											});
						 });
}
function drawChart() {
	var names={
		none:'',
		c1:$('input[@name=c1name]').val(),
		c2:$('input[@name=c2name]').val(),
		c3:$('input[@name=c3name]').val()
	};
	var chartInit={
		        painterType:$('select[@name=paintertype]').val(),
				backgroundColor:$('select[@name=backgroundcolor]').val(),
				textColor:$('select[@name=textcolor]').val(),
				axesColor:$('select[@name=textcolor]').val(),
				yMin:$('input[@name=yMin]').val(),
				yMax:$('input[@name=yMax]').val(),
				xGrid:$('input[@name=xGrid]').val(),
                yGrid:$('input[@name=yGrid]').val(),
                xLabels:getTableCol('x'),
                showLegend:($('input[@name=showLegend][@checked]').val()>0)};
	var chart1={
				label:names['c1'],
				type:$('select[@name=c1type]').val(),
				color:$('select[@name=c1color]').val(),
				values:getTableCol('c1')};
	var chart2={
				label:names['c2'],
				type:$('select[@name=c2type]').val(),
				color:$('select[@name=c2color]').val(),
				values:getTableCol('c2'),
				stackedOn:names[$('select[@name=c2stack]').val()]};
	var chart3={
				label:names['c3'],
				type:$('select[@name=c3type]').val(),
				color:$('select[@name=c3color]').val(),
				values:getTableCol('c3', 'c3'),
				stackedOn:names[$('select[@name=c3stack]').val()]};
	$('#mychart')
	    .chartInit(chartInit)
	    .chartAdd(chart1)
	    .chartAdd(chart2)
	    .chartAdd(chart3)
	    .chartClear()
	    .chartDraw();
	$('#chartjs').html("$('#mychart')<br>.chartInit("+JSON.stringify(chartInit)+")<br>.chartAdd("+JSON.stringify(chart1)+")<br>.chartAdd("+JSON.stringify(chart2)+")<br>.chartAdd("+JSON.stringify(chart3)+")<br>.chartClear()<br>.chartDraw();");

}
$(document).ready(function() {
    $('input[@type=text],select').addClass('field');				  
    addColorOptions();
	setTableCol('x',['线路1','线路2','线路3','线路4','线路8','线路10','线路11']);
	setTableCol('c1',[34,28,25,29,33,26,27]);
	setTableCol('c2',[54,48,45,59,43,43,49]);
	setTableCol('c3',[0.5,0.5,0.1,0.3,0.6,0.2,0.8,0.3]);
	$('#drawbutton').click(drawChart);
	drawChart();
});
</script>
</head>

<body>
<h1>线路信息总览图(demo)</h1>
<table>
<tr><td rowspan="2">
<div id="chartdata">
<h3>配置信息</h3>
<table id="datatable">
  <thead>
	<tr  style="display:none;">
	  <td align="right">Area:</td>
		  <td>Painter<br><select name="paintertype"><option value="jsgraphics">JS Graphics</option><option value="canvas">Canvas</option></select></td>
	  <td>Background:<br><select class="colorpick" name="backgroundcolor"><option value="">default</option></select></td>
	  <td>Text:<br><select class="colorpick" name="textcolor"><option value="">default</option></select></td>
	<tr  style="display:none;">
	  <td align="right">Y Range:</td>
	  <td>Min<br><input type="text" name="yMin" value="0"></td>
	  <td>Max<br><input type="text" name="yMax" value="100"></td>
	  <td></td>
	</tr>
	<tr  style="display:none;">
	  <td align="right">Grid Lines:</td>
	  <td>X grid<br><input type="text" name="xGrid" value="0"></td>
	  <td>Y grid<br><input type="text" name="yGrid" value="10"></td>
	  <td></td>
	</tr>
	<tr  style="display:none;">
	  <td align="right">Show Legend:</td>
	  <td colspan="3"><input type="checkbox" name="showLegend" value="1"></td>
	</tr>
	<tr  style="display:none;">
	  <th></th>
	  <th>Series 1</td>
	  <th>Series 2</td>
	  <th>Series 3</td>
	</tr>
	<tr  style="display:none;" >
	  <td align="left">线路名</td>
	  <td><input type="text" name="c1name" size="10" value="缆表温度"></td>
	  <td><input type="text" name="c2name" size="10" value="导体温度"></td>
	  <td><input type="text" name="c3name" size="10" value="尖峰值"></td>
	  <td><input type="text" name="c3name" size="10" value="实时电流"></td>
	</tr>
	<tr  style="display:none;">
	  <td align="right">Type:</td>
	  <td><select name="c1type">
	  <option value="Bar">Bar</option>
	  <option value="Area">Area</option>
	  <option value="Line">Line</option>
	  </select>
	  </td>
	  <td><select name="c2type">
	  <option value="Bar">Bar</option>
	  <option value="Area">Area</option>
	  <option value="Line">Line</option>
	  </select>
	  </td>
	  <td><select name="c3type">
	  <option value="Bar">Bar</option>
	  <option value="Area">Area</option>
	  <option value="Line">Line</option>
	  </select>
	  </td>
	</tr>
	<tr  style="display:none;">
	  <td align="right" >颜色:</td>
	  <td><select class="colorpick" name="c1color" default="#00EE00"></select>
	  </td>
	  <td><select class="colorpick" name="c2color" default="#0000EE"></select>
	  </td>
	  <td><select class="colorpick" name="c3color" default="#EE0000"></select>
	  </td>
	</tr>
	</thead>
	<tr  style="display:none;">
	  <td align="right">Stack On:</th>
	  <td>-</td>
	  <td><select name="c2stack">
	  <option value="none">None</option>
	  <option value="c1">Series 1</option>
	  </select> 
	  </td>	  
	  <td><select name="c3stack">
		  <option value="none">None</option>
		  <option value="c1">Series 1</option>
		  <option value="c2">Series 2</option>
		  </select> 
		  </td>
	</tr>
	<tr>
	<td>Name</td>
	<td>Tc (℃)</td>
	<td>Tcc (℃)</td>
	<td>Tp (℃)</td>
	<td>I (A)</td>
	</tr>
	<tbody>
	<tr>
	  <td><input type="text" name="x" size="5"></td>
	  <td ><input type="text" name="c1" size="5" style=" background-color:red;"></td>
	  <td><input type="text" name="c2" size="5"  style=" background-color:lemonchiffon;"></td>
	  <td><input type="text" name="c3" size="5"></td>
	  <td><input type="text" name="c4" size="5" value="79"></td>
	</tr>
	<tr>
	  <td><input type="text" name="x" size="5"></td>
	  <td><input type="text" name="c1" size="5"></td>
	  <td><input type="text" name="c2" size="5"></td>
	  <td><input type="text" name="c3" size="5"></td>
	  <td><input type="text" name="c4" size="5" value="73"></td>
	</tr>
	<tr>
	  <td><input type="text" name="x" size="5"></td>
	  <td><input type="text" name="c1" size="5"></td>
	  <td><input type="text" name="c2" size="5"></td>
	  <td><input type="text" name="c3" size="5"></td>
	  <td><input type="text" name="c4" size="5" value="59"></td>
	</tr>
	<tr>
	  <td><input type="text" name="x" size="5"></td>
	  <td><input type="text" name="c1" size="5"></td>
	  <td><input type="text" name="c2" size="5" style=" background-color:lemonchiffon;"></td>
	  <td><input type="text" name="c3" size="5"></td>
	  <td><input type="text" name="c4" size="5" value="55"></td>
	</tr>
	<tr>
	  <td><input type="text" name="x" size="5"></td>
	  <td><input type="text" name="c1" size="5"></td>
	  <td><input type="text" name="c2" size="5"></td>
	  <td><input type="text" name="c3" size="5"></td>
	  <td><input type="text" name="c4" size="5" value="76"></td>
	</tr>
	<tr>
	  <td><input type="text" name="x" size="5"></td>
	  <td><input type="text" name="c1" size="5"></td>
	  <td><input type="text" name="c2" size="5"></td>
	  <td><input type="text" name="c3" size="5"></td>
	  <td><input type="text" name="c4" size="5" value="71"></td>
	</tr>
	<tr>
	  <td><input type="text" name="x" size="5"></td>
	  <td><input type="text" name="c1" size="5"></td>
	  <td><input type="text" name="c2" size="5"></td>
	  <td><input type="text" name="c3" size="5"></td>
	  <td><input type="text" name="c4" size="5" value="65"></td>
	</tr>
	<tr>
	<td colspan="4" align="center"><input type="button" value="重新绘制" id="drawbutton"></td>
	</tr>
	</tbody>
</table>
</td><td>
</div>
<div id="chartcode" style="display:none;">
<h3>Chart Code</h3>
<pre id="chartjs">
</pre>
</div>
</td></tr>
<tr><td>
<div id="chartarea">
<h3>统计图</h3>
<div id="mychart" class="chart" style="width: 600px; height: 300px;"></div>
</div>
</td></tr>
</table>
</body> </html>
